<template>
  <div class="dashboard-container">
    <el-container>
      <!-- 头部 -->
      <el-header class="dashboard-header">
        <div class="header-left">
          <h1>管理系统</h1>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-dropdown">
              <el-avatar :size="32">
                <el-icon><User /></el-icon>
              </el-avatar>
              <span class="username">{{ userStore.user?.username }}</span>
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人资料
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  <el-icon><Setting /></el-icon>
                  系统设置
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" class="dashboard-aside">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            @select="handleMenuSelect"
            router
            :default-openeds="['finance']"
          >
            <el-menu-item index="/dashboard/customers">
              <el-icon><UserFilled /></el-icon>
              <span>客户管理</span>
            </el-menu-item>
            <el-menu-item index="/dashboard/shops">
              <el-icon><Shop /></el-icon>
              <span>店铺管理</span>
            </el-menu-item>
            <el-menu-item index="/dashboard/networks">
              <el-icon><OfficeBuilding /></el-icon>
              <span>网点管理</span>
            </el-menu-item>
            <el-sub-menu index="finance">
              <template #title>
                <el-icon><Money /></el-icon>
                <span>财务管理</span>
              </template>
              <el-menu-item index="/dashboard/waybill-recharge">
                <el-icon><CreditCard /></el-icon>
                <span>面单充值</span>
              </el-menu-item>
              <el-menu-item index="/dashboard/transaction-records">
                <el-icon><Document /></el-icon>
                <span>交易记录</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/dashboard/home">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item
              index="/dashboard/data"
              v-if="userStore.user?.role === 'admin'"
            >
              <el-icon><DataAnalysis /></el-icon>
              <span>数据统计</span>
            </el-menu-item>
            <el-menu-item index="/dashboard/settings">
              <el-icon><Setting /></el-icon>
              <span>系统设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="dashboard-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  User,
  ArrowDown,
  Setting,
  SwitchButton,
  House,
  UserFilled,
  DataAnalysis,
  Shop,
  Money,
  CreditCard,
  Document,
  OfficeBuilding,
} from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path;
});

// 处理下拉菜单命令
const handleCommand = async (command) => {
  switch (command) {
    case "profile":
      ElMessage.info("个人资料功能开发中...");
      break;
    case "settings":
      ElMessage.info("系统设置功能开发中...");
      break;
    case "logout":
      try {
        await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await userStore.logout();
        ElMessage.success("已退出登录");
        router.push("/login");
      } catch {
        // 用户取消
      }
      break;
  }
};

// 处理菜单选择
const handleMenuSelect = (index) => {
  router.push(index);
};
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$border-color: #e4e7ed;
$bg-color: #f5f7fa;

.dashboard-container {
  height: 100vh;
}

.dashboard-header {
  background: #fff;
  border-bottom: 1px solid $border-color;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .header-left {
    h1 {
      margin: 0;
      color: $text-primary;
      font-size: 20px;
    }
  }

  .header-right {
    .user-dropdown {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 6px;
      transition: background-color 0.3s;

      &:hover {
        background-color: $bg-color;
      }

      .username {
        font-size: 14px;
        color: $text-primary;
      }
    }
  }
}

.dashboard-aside {
  background: #fff;
  border-right: 1px solid $border-color;

  .sidebar-menu {
    border-right: none;
  }
}

.dashboard-main {
  background: $bg-color;
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-aside {
    width: 60px !important;
  }

  .dashboard-main {
    padding: 10px;
  }
}
</style>
